<template>
  <div class="details">
    <HomeHeader></HomeHeader>
    <div class="goods_info">
      <div class="media">
        <div class="goods_img">
          <div class="spec-preview">
          <!-- //图片地址 -->
            <img :src="big_img" />
            <!-- //定义:src="big_img"鼠标事件 -->
            <div class="event" @mousemove="handler"></div>
            <!-- //定义放大后的图样式 -->
            <div class="big">
            <!-- //放大后的图的原始图片 -->
              <img :src="big_img" ref="big" />
            </div>
            <!-- 遮罩层 -->
            <div class="mask" ref="mask"></div>
          </div>
          <!-- 选择图片 -->
          <ul class="small_img">
            <li :class="num == index?'lineBox':''" v-for="(item,index) of img_data" :key="item" @mouseenter="aImg(item,index)"><img :src="item" alt=""></li>
          </ul>
        </div>
        <ul class="goods-sales">
          <li v-for="item of sales_data" :key="item.id">
            <p class="sales_title">{{item.title}}</p>
            <p class="sales_content">{{item.content}}</p>
            <p class="sales_pas"><i :class="item.icon"></i>{{item.pas}}</p>
          </li>
        </ul>
      </div> 
      <div class="spec">
        <p class="g_name">{{data.name}}</p>
        <p class="g_desc">{{data.desc}}</p>
        <p class="g-price">
          <span>{{data.price}}</span>
          <span>{{data.oldPrice}}</span>
        </p>
        <div class="g-service">
          <dl>
            <dt>促销</dt>
            <dd>12月好物放送,App领券购买直降120元</dd>
          </dl>
          <dl>
            <dt>配送</dt>
            <dd>至
              <div class="selected">
                
              </div>
            </dd>
          </dl>
          <dl>
            <dt>服务</dt>
            <dd>
              <span>无忧退货</span><span>快速退款</span><span>免费包邮</span>
              <a href="" >了解详情</a>
            </dd>
          </dl>
        </div>
        <div class="goods_sku">
          <!-- <dl>
            <dt>{{specs[0].name}}</dt>
            <dd>
              <div v-for="item in specs[0].values" :key="item.id">
                <img :src="item.picture" alt="">
              </div>
            </dd>
          </dl>
          <dl >
            <dt>{{specs[1].name}}</dt>
            <dd class="size">
              <span v-for="item in specs[1].values" :key="item.id">{{item.name}}</span> 
            </dd> 
          </dl> -->
          <dl v-for="(item,index) in specs" :key="item.name">
            <dt>{{item.name}}</dt>
            <dd>
                <img v-for="items in item.values" v-show="items.picture!=null" :src="items.picture" :key="items.name" alt="">
                <span v-for="items in item.values" v-show="index==1" :key="items.values">{{items.name}}</span>
            </dd>
          </dl>
        </div> 
         <div class="xtx-numbox">
          <div class="label">
            数量
          </div>
          <div class="numbox">
            <a @click="cutClick">-</a>
            <input readonly type="text" :value="num_value">
            <a @click="addClick">+</a>
          </div>
        </div>
        <el-button type="info" >加入购物车</el-button>
      </div>
    </div>
    <!-- 推荐商品 -->
    <div class="goods-relevant">
      <div class="header">
        <i class="icon"></i>
        <span class="title">同类商品推荐</span>
      </div>
      <div class="xtx-carousel">
        <detail-swiper></detail-swiper>
      </div>
    </div>
    <!-- 详情 -->
    <div class="goods-footer">
      <div class="goods-article">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">商品详情</el-menu-item>
          <el-menu-item index="2">商品评价</el-menu-item>
        </el-menu>
        <div v-if="flag" class="goods-detail">
          <img v-for="item in main_img" :src="item" :key="item.id" alt="">
        </div>
        <div v-if="!flag" class="goods-comment"></div>
      </div>
      <div class="goods-aside">
        <div class="goods_hot">
          <h2>24小时热销榜</h2>
          <div>
            <a v-for="item in aside_data" :key="item.id">
              <img :src="item.picture" alt="">
              <p class="elliplies">{{item.name}}</p>
              <p class="desc_ellip">{{item.desc}}</p>
              <p class="price">￥{{item.price}}</p>
            </a>
          </div>
        </div>
        <div class="goods_hot">
          <h2>周热销榜</h2>
          <div>
            <a v-for="item in aside_data" :key="item.id">
              <img :src="item.picture" alt="">
              <p class="elliplies">{{item.name}}</p>
              <p class="desc_ellip">{{item.desc}}</p>
              <p class="price">￥{{item.price}}</p>
            </a>
          </div>
        </div>
      </div>
    </div>
    <note-view>
      
    </note-view>
    <HomeFooter></HomeFooter>
  </div> 
</template>

<script>
import NoteView from '@/views/details/compontents/noteView'
import detailSwiper from '@/views/details/compontents/detailSwiper'
import HomeHeader from '@/common/HomeHeader.vue'
import HomeFooter from '@/common/HomeFooter.vue'
export default {
  name: "detailsView",
  components:{
    detailSwiper,
    NoteView,
    HomeHeader,
    HomeFooter
  },
  data() {
    return {
      activeIndex:'1',
      data: [],
      data_name: [],
      img_data: [],
      big_img: "",
      name:'',
      specs: [],
      main_img: [],
      num_value: "1",
      flag: true,
      aside_data: [],
      num: "",
      sales_data: [
        {title:"销量人气",content:"200+",icon:"el-icon-s-flag",pas:"销量人气"},
        {title:"商品评价",content:"400+",icon:"el-icon-s-comment",pas:"查看评价"},
        {title:"收藏人气",content:"600+",icon:"el-icon-star-on",pas:"收藏商品"},
        {title:"品牌信息",content:"苏宁电器",icon:"el-icon-d-caret",pas:"品牌主页"},
      ],
    }
  },
  // async created() {
  //   console.log(this.$route.query)
  //   let id = this.$route.query.id
  //   let res = await this.$http.getGoods({id})
  //   console.log(res)
  //   this.img_data = res.data.result.mainPictures
  //   this.big_img = res.data.result.mainPictures[0];
  //   this.data = res.data.result
  //   this.data_name = res.data.result.categories.reverse();
  //   this.name = res.data.result.name;
  //   this.specs = res.data.result.specs
  //   this.main_img = res.data.result.details.pictures
  //   this.aside_data = res.data.result.similarProducts
  // },
  watch: {
      $route: {
        handler: async function (val){
          console.log(val.query.id)
          let id = val.query.id
          let res = await this.$http.getGoods({id})
          this.img_data = res.data.result.mainPictures
          this.big_img = res.data.result.mainPictures[0];
          this.data = res.data.result
          this.data_name = res.data.result.categories.reverse();
          this.name = res.data.result.name;
          this.specs = res.data.result.specs
          this.main_img = res.data.result.details.pictures
          this.aside_data = res.data.result.similarProducts
          console.log(res)
        },
        // 深度观察监听
        deep: true,
        // immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
        immediate:true
      }
    },
  computed: {

    
  },
  mounted() {
    //全局事件总线获取兄弟组件传递过来的索引值
    
  },
  methods: {
  //这里是放大方法的主要处理逻辑
    handler(event) {
        let mask = this.$refs.mask;
        let big = this.$refs.big;
        let left = event.offsetX - mask.offsetWidth / 2;
        let top = event.offsetY - mask.offsetHeight / 2;
        //约束范围
        if (left <= 0) left = 0;
        if (left >= mask.offsetWidth) left = mask.offsetWidth;
        if (top <= 0) top = 0;
        if (top >= mask.offsetHeight) top = mask.offsetHeight;
        mask.style.left = left + "px";
        mask.style.top = top + "px";
        big.style.left = -2 * left + "px";
        big.style.top = -2 * top + "px";
    },
    aImg(item,index) {
      this.big_img = item
      this.num = index;
    },
    addClick() {
      this.num_value = Number(this.num_value) + 1
    },
    cutClick() {
      if(this.num_value <= 1) {
        this.num_value = 1
      }else {
        this.num_value = Number(this.num_value) - 1
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      if(key==1) {
        this.flag = true;
      }else {
        this.flag = false;
      }
    }
  }
}
</script>

<style scoped lang="less">
  .details {
    width: 100%;
    .xtx_bread {
      width: 1240px;
      height: 72px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      padding-left: 30px;
    }
    .goods_info {
      width: 1240px;
      height: 600px;
      background: #fff;
      margin: 0 auto;
      display: flex;
      .media {
        width: 530px;
        height: 600px;
        padding: 30px 50px;
        .goods_img {
          width: 480px;
          height: 400px;
          display: flex;
          /* 放大镜 */
          .spec-preview {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;

            img {
              width: 100%;
              height: 100%;
            }

            .event {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 998;
            }

            .mask {
              width: 50%;
              height: 50%;
              background-color: rgba( 0, 0, 0, 0.2);
              position: absolute;
              left: 0;
              top: 0;
              display: none;
            }

            .big {
              width: 100%;
              height: 100%;
              position: absolute;
              top: -1px;
              left: 100%;
              border: 1px solid #aaa;
              overflow: hidden;
              z-index: 998;
              display: none;
              background: white;

              img {
                width: 200%;
                max-width: 200%;
                height: 200%;
                position: absolute;
                left: 0;
                top: 0;
              }
            }

            .event:hover ~ .mask,
            .event:hover ~ .big {
              display: block;
            }
          }
          /* 图片选择 */
          .small_img {
            width: 80px;
            list-style:none;
            li {
              width: 64px;
              height: 64px;
              margin: 0 0 15px 12px;
              
              img {
                width: 100%;
                height: 100%;
              }
            }
            li.lineBox {
              outline: 2px solid #27ba9b;
            }
          }
        }
        .goods-sales {
          margin-left:-55px;
          height: 140px;
          display: flex;
          align-items: center;
          list-style: none;
          li {
            width: 95px;
            height: 80px;
            // margin:0 auto;
            position: relative;
            .sales_title {
              color: #999;
              font-size: 14px;
              text-align: center;
            }
            .sales_content {
              color: #cf4444;
              margin-top: 10px;
              font-size: 14px;
              text-align: center;
            }
            .sales_pas {
              color: #666;
              margin-top: 10px;
              font-size: 14px;
              text-align: center;
            }
          }
          li::after {
            display: block;
            content: "";
            width: 1px;
            height: 60px;
            background: #999;
            position: absolute;
            top: 50%;
            right:0;
            margin-top: -30px;
          }
          li:last-child ::after {
            width: 0;
          }
        }
        
      }
      .spec {
        width: 630px;
        height: 540px;
        padding: 30px 30px 30px 0;
        text-align: left;
        p {
          text-align: left;
        }
        .g_name {
          font-size: 22px;
        }
        .g_desc {
          font-size: 13px;
          color: #999;
          margin-top: 10px;
        }
        .g-price {
          margin-top: 10px;
          span:first-child {
            font-size: 22px;
            color: #cf4444;
          }
          span:last-child {
            font-size: 16px;
            color: #999;
            text-decoration: line-through;
          }
          span::before {
            content:"￥";
            font-size: 14px;
          }
        }
        .g-service {
          width: 480px;
          // height: 130px;
          background: #f5f5f5;
          margin-top: 10px;
          padding: 20px 10px 0 10px;
          dl {
            display: flex;
            padding-bottom: 20px;
            dt {
              width: 50px;
              height: 20px;
              font-size: 15px;
              color: #999;
              text-align: left;
              font-weight: 200;
            }
            dd {
              height: 20px;
              font-size: 15px;
              font-weight: 400;
              span {
                margin-right: 10px;
              }
              span::before {
                content:"•";
                color: rgb(39, 186, 155);
                margin-right: 5px;
              }
              a {
                color: #27ba9b;
              }
              .selected {
                width: 150px;
                height: 30px;
                border: 1px solid #ccc;
                display: inline-block;
              }
            }
          }

        }
        .goods_sku {
          margin-top: 10px;
          padding: 20px 10px 0 10px;
          dl {
            display: flex;
            height: 45px;
            padding-bottom: 20px;
            align-items: center;
            dt {
              width: 50px;
              height: 20px;
              font-size: 15px;
              color: #999;
              text-align: left;
              font-weight: 200;
              
            }
            dd {
              height: 20px;
              font-size: 15px;
              font-weight: 400;
              display: flex;
              align-items: center;
              img {
                width: 48px;
                height: 48px;
                text-align: left;
                border: 1px solid #ccc;
                line-height: 48px;
                margin: 0 10px 5px 0;
                /* img {
                  width: 48px;
                  height: 48px;
                  
                  border: 1px solid #ccc;
                } */
              }
              span {
                padding: 5px 20px;
                border: 1px solid #ccc;
                margin-right: 10px;
              }
              
            }
            
          }
        }
        .xtx-numbox {
          height: 30px;
          margin: 10px 0 0 10px;
          display: flex;
          .label {
            width: 50px;
            height: 30px;
            font-size: 15px;
            color: #999;
            text-align: left;
            font-weight: 200;
            line-height: 30px;
          }
          .numbox {
            width: 120px;
            height: 30px;
            display: flex;
            align-items: center;
            a {
              width: 32px;
              height: 30px;
              border: 1px solid #e4e4e4;
              line-height: 30px;
              background: #f8f8f8;
              text-align: center;
            }
            input {
              width: 60px;
              height: 28px;
              line-height: 30px;
              border: 1px solid #e4e4e4;
              text-align: center;
            }
          }
        }
        .el-button {
          width: 170px;
          height: 46px;
          border: 1px solid transparent;
          padding: 1px 6px;
          margin-top: 20px;
        }
      } 
    }
    .goods-relevant {
      width: 1240px;
      height: 460px;
      margin: 20px auto;
      background: #fff;
      .header {
        width: 1200px;
        height: 60px;
        padding: 20px;
        text-align: left;
        .icon {
          width: 16px;
          height: 16px;
          display: inline-block;
          border-top: 4px solid #27ba9b;
          border-right: 4px solid #27ba9b;
          box-sizing: border-box;
          position: relative;
          transform: rotate(45deg);
        }
        .icon::before {
          content: "";
          width: 10px;
          height: 10px;
          position: absolute;
          left: 0;
          top: 2px;
          background: #bcf1e6;
        }
        span {
          padding-left: 10px;
          font-size: 20px;
        }
      }
    }
    .goods-footer {
      width: 1240px;
      display: flex;
      margin: 0 auto;
      
      .goods-article {
        width: 920px;
        margin-right: 20px;
        background: #fff;
        padding: 20px;
        .el-menu {
          .el-menu-item {
            font-size: 20px;
          }
        }
        .goods-detail {
          width: 940px;
          img {
            vertical-align: top;
          }
        }
        .goods-comment {
          width: 940px;
          height: 100px;
          background: blue;
        }
      }
      .goods-aside {
        width: 280px;
        .goods_hot {
          width: 100%;
          h2 {
            width: 280px;
            height: 70px;
            color: #fff;
            font-weight: 300px;
            font-size: 18px;
            background: #e26237;
            text-align: left;
            line-height: 70px;
            padding-left: 20px;
            margin-bottom: 10px;
          }
          div {
            width: 280px;
             a {
              width: 260px;
              padding: 20px 30px;
              display: block;
              margin-bottom: 10px;
              background: #fff;
              img {
                width: 200px;
                height: 200px;
              }
              p {
                width: 200px;
                white-space:nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin: 0 auto;
                padding-top: 10px;
              }
              .price {
                font-size: 20px;
                color: #cf4444;
              }
            }
          }
         
        }
      }
    }
  }
  
 
  
</style>